<template>
  <v-sheet
    :height="$vuetify.breakpoint.smAndDown ? 300 : 500"
    class="overflow-auto col-10 z-index-xs scrollbar"
  >
    <v-row>
      <v-col
        class="col-12 col-sm-6 col-md-4 col-lg-3"
        v-for="(doctorInfo, index) in doctorInfos"
        :key="index"
      >
        <doctor-card :doctorInfo="doctorInfo"></doctor-card>
      </v-col>
    </v-row>
  </v-sheet>
</template>



<script>
import eventBus from "../../eventBus/eventBus";
import doctorCard from "./doctorCard.vue";
export default {
  components: { doctorCard },
  data() {
    return {
      doctorInfos: [],
    };
  },

  mounted() {
    eventBus.$on("getDoctorInfoWithIllness", (doctorInfos) => {
      this.doctorInfos = doctorInfos;
    });

    const that = this;
    (async () => {
      const { data: doctorInfos } = await that.$axios.get(
        `doctors/getRecommendDoctor?limitNum=12`
      );
      that.doctorInfos = doctorInfos;
    })();
  },
};
</script>



<style lang="scss" scoped>
.scrollbar {
  &::-webkit-scrollbar-button {
    background-color: #00bcd4;
  }

  &::-webkit-scrollbar {
    width: 5px;
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    background: #00bcd4;
  }
  &::-webkit-scrollbar-track {
    border-radius: 10px;
    background: transparent;
  }
}

.title-hover {
  &:hover {
    color: #00bcd4;
  }
}
v-rating {
  $rating-padding: 0.5rem;
}
</style>
